﻿@model App.Web.ViewModels.UtilityModels.ListConfig
@using App.Core.Extensions
@using App.Web.ViewModels.UtilityModels
@using App.Web.Utility
@{
    String keyword = ViewBag.SearchType;
    String pageTitle = "Product Search Result";
    ViewBag.Title = Html.GetPageTitle(pageTitle);
    //ListConfig _ListConfig = Model;
    PagerConfig _PagerConfig = Model.Pager;
    ViewBag.DataSource = Model.DataSource;
    ViewBag.TotalRecord = Model.Pager.TotalRecord;
    _PagerConfig.UrlFormat = "/product/search?key=" + keyword + "&pageNo={0}";
    if (keyword.IsNullOrEmpty())
    {
        ViewBag.ShowMessage = false;
    }
    ViewData[AppConstants.ViewDataKeys.CALCULATE_OCCURANCE] = true;
}
@section PageHeadSection
{
    <style type="text/css">
        input[type="text"].search-text-box{float:left; font-size:19px; font-weight:normal; width:400px;}
        .search-box{margin:0px 0px 15px 3px;}
        .search-tips{margin:10px 0px 5px 0px;} .search-tips li{margin-top:7px;}
    </style>
}

@*<script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>*@
<script src="/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<div class="page-heading">
    <h1>@pageTitle</h1>
    <div>
        @if(keyword.IsNullOrEmpty()){
            <text>Enter your keyword in the following text box and click Search.</text>
        }
        else {
        <text>List of matched product(s) for your given search keyword.</text>
        }
    </div>
</div>
                    
<div class="GroupBox">
    @using (Html.BeginForm("search", "product", FormMethod.Post, new { id="frmSearch"}))
    {
    <div class="search-box">
        <input class="search-text-box" id="txtKeyword" name="keyword" type="text" maxlength="100" value="@keyword" />
        <div class="button float-left" onclick="SubmitSearchForm();" style="margin-left:10px;">Search</div>
        <div class="float-left" style="margin:6px 0px 0px 10px;"><a href="javascript:void(0);" id="btnSearchTips">Search Tips</a></div>
        <div class="clear"></div>
    </div>    
    }
    <div id="divSearchResult">
    @Html.Partial("_ProductList")
    @if (_PagerConfig != null && !keyword.IsNullOrEmpty())
    {    
        @Html.Partial("_Pager", _PagerConfig)
    }
    </div>
</div>

@section RightSideBar{
<div class="right-sidebar-container">
    <div style="border-bottom:#EFEFEF 1px solid; padding-bottom:2px; margin-bottom:10px;">
        <h2>Narrow Result</h2>
    </div>
    <div id="divSearchFilters"></div>
</div>
}
<div id="divSearchDialog" class="hidden">
    <a href="/">@ConfigReader.SiteName</a>'s search engine supports several techniques of search. 
    You can specify them in your search keyword. They are preety simple and you can try few of them. 
    Suppose you are looking for a Digital Camera, then you can format your keywords in following ways:
    <ul class="search-tips">
        <li>
            If you want a exact match in your search result then sorrund your keyword with a <b>double quote</b> (")<br />
            <b>Example:</b> "Digital Camera"
        </li>
        <li>
            If you want to match all of your keywords, then you can use <b>and</b> operator.<br />
            <b>Example:</b> Digital AND Camera
        </li>
        <li>
            If you want to match few of your keywords, then you can try <b>or</b> operator.<br />
            <b>Example:</b> Digital OR Camera
        </li>
        <li>
            Or you can simply enter your search criteria about what you are looking for and 
            @ConfigReader.SiteName's search engine will intelligently show matching products.
        </li>
    </ul>
</div>

<script language="javascript" type="text/javascript">
    var _SearchTipDialog = null;
    $(document).ready(function () {
        _SearchTipDialog = $('#divSearchDialog').dialog({
            autoOpen: false,
            title: 'Serach Tips',
            modal: false,
            width: 660,
            buttons: {
                'Close': function () { $(this).dialog('close'); }
            }
        });
        $('#btnSearchTips').click(function () {
            $(_SearchTipDialog).dialog('open');
        });
    });

    ///**** Search Filter Functionality Starts from Here  ***/
    function SearchPayload(keyword) {
        this.Keyword = keyword;
        this.Filters = [];
    }
    $(function () {
        PopulateSearchFilters();
    });
    function PopulateSearchFilters() {
        var catID = $('#hdnCategoryID').val();
        if (catID > 0) {
            AjaxGET('/search/BuildFilters?categoryID=' + catID, function (result) {
                if (result.length > 0) {
                    $('#divSearchFilters').html(result);
                }
                $('#divSearchFilters').find('input').click(function () {
                    RefreshSearchResult($(this));                    
                });
            });
        }
    }
    function ClearFilters() {
        $('.search-filters input').each(function () {
            $(this).attr('checked', false);
        });
        RefreshSearchResult(null);
    }
    function RefreshSearchResult(fElement) {
        var keyword = $('#txtKeyword').val();
        if (keyword.length > 0) {
            ShowLoadingAnimation(false);
            var payload = new SearchPayload(keyword);
            $('.search-filters input').each(function (obj, i) {
                if ($(this).is(':checked')) {
                    var searchType = $(this).attr('type') == 'radio' ? 'Range' : 'MultiSelect';
                    var filter = { SearchType: searchType, SearchField: $(this).parent().parent().attr('searchfield'), Value: $(this).val() };
                    payload.Filters.push(filter);
                }
            });
            Ajax('/search/RefineSearch', 'json=' + JSON.stringify(payload), function (result) {
                HideLoadingAnimation();
                $('#divSearchResult').html(result);
                //alert(result);
            });        
        }
        //alert($(fElement).attr('value'));
    }
    ///*** End of Search Filter Functionality
</script>
@Html.Partial("_AutocompleteJS")